<template>
	<view class="tagWrap" :class="['tagWrap_'+type,'tagWrap_'+plain+type]">
		<text :class="['tagWrap_'+type+'_text','tagWrap_'+plain+type+'_text']">{{text}}</text>
	</view>
</template>

<script>
	export default {
		props:{
			text:{
				type:String,
				default:''
			},
			type:{
				type:String,
				default:''
			},
			plain:{
				type:String,
				default:''
			}
		}
	}
</script>

<style lang="scss" scoped>
.tagWrap{
	display: flex;
	border-radius: 16rpx;
	justify-content: center;
	align-items: center;
	&_success{
		width: 70rpx;
		height: 36rpx;
		border: 1rpx solid  $u-success;
		background-color: $u-success;
		&_text{
			font-size: 24rpx;
			color:#fff;
		}
	}
	&_error{
		width: 70rpx;
		height: 36rpx;
		border: 1rpx solid  $uni-color-error;
		background-color: $uni-color-error;
		&_text{
			font-size: 24rpx;
			color:#fff;
		}
	}
	&_warning{
		width: 70rpx;
		height: 36rpx;
		border: 1rpx solid  $uni-color-warning;
		background-color: $uni-color-warning;
		&_text{
			font-size: 24rpx;
			color:#fff;
		}
	}
	&_plain_success{
		width: 70rpx;
		height: 40rpx;
		border: 1rpx solid  $u-success;
		background-color: rgba(0,0,0,0);
		&_text{
			font-size: 24rpx;
			color:$u-success;
		}
	}
	&_plain_error{
		width: 70rpx;
		height: 40rpx;
		border: 1rpx solid  $uni-color-error;
		background-color: rgba(0,0,0,0);
		&_text{
			font-size: 24rpx;
			color:$uni-color-error;
		}
	}
	&_plain_warning{
		width: 70rpx;
		height: 40rpx;
		border: 1rpx solid  $uni-color-warning;
		background-color: rgba(0,0,0,0);
		&_text{
			font-size: 24rpx;
			color:$uni-color-warning;
		}
	}
}
</style>
